import React, { useState } from 'react';
import { Ret, Title, useHigh, MainView, PanelTitle, BtGroup, BtToggle, loc } from 'sui';
import { FindPsn } from './find';

const CensusView = ({ col, hreturn }) => {
    const [cens_type, tpCens] = useState("psn");
    const [high] = useHigh(220, 100);

    const getView = () => {
        return <FindPsn high={high} col={col}/>;
    };

    const Right = () => (
        <div className="inline-flex">
            <Ret hcmd={hreturn}/>
        </div>
    );

    const Left = () => {
        return (
            <div className="inline-flex items-center">
                <Title mod={loc("l_321")} sub={loc("l_832")} className="mr-32"/>
                <BtGroup value={cens_type} exclusive onChange={(e, v) => tpCens(v)}>
                    <BtToggle value="psn">{loc("l_152")}</BtToggle>
                </BtGroup>
            </div>
        );
    };

    return (
        <MainView>
            <PanelTitle left={<Left/>} right={<Right/>} cl="gray"/>
            {getView()}
        </MainView>
    );
};

export {CensusView};
